<template>
  <div class="prescription-list-container">
    <ul class="top-table-title">
      <li class="title-item title-item1">药品名称</li>
      <li class="title-item title-item2">规格</li>
      <li class="title-item title-item3">频率</li>
      <li class="title-item  title-item4">单次剂量</li>
      <li class="title-item title-item5">用法</li>
      <li class="title-item title-item6">数量</li>
      <li class="title-item title-item7">单价</li>
    </ul>
    <div
      class="prescription-item"
      v-for="(item,index) in prescriptionList"
      :key="index"
    >
      <div class="group"><h3>分组{{index+1}}</h3></div>
      <ul class="item-ul">
        <li class="item-li" v-for="(det,detidx) in item.details" :key="detidx">
          <div class="title-item title-item1">{{det.product_name}}</div>
          <div class="title-item title-item2">{{det.pack}}</div>
          <div class="title-item title-item3">{{item.remark.yypl}}</div>
          <div class="title-item title-item4">{{det.single_dose}}{{det.single_unit}}</div>
          <div class="title-item title-item5">{{item.remark.yf}}</div>
          <div class="title-item title-item6">{{det.number}}</div>
          <div class="title-item title-item7">{{det.price}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    prescriptionItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      prescriptionList: [],
    };
  },
  mounted() {
    this.dataOption();
    console.log(this.prescriptionList);
  },
  methods: {
    dataOption() {
      for (const key in this.prescriptionItem.remark) {
        let detail = this.prescriptionItem.details.filter(
          (p) => key == p.group
        );
        let item = {
          ID: this.prescriptionItem.ID,
          category_key: "sycf",
          category_name: "输液处方",
          group_count: this.prescriptionItem.group_count,
          medical_record_id: this.prescriptionItem.medical_record_id,
          prescription_name: this.prescriptionItem.prescription_name,
          prescription_status: this.prescriptionItem.prescription_status,
          details: detail,
          remark: this.prescriptionItem.remark[key],
        };
        if(detail.length){
          this.prescriptionList.push(item);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/print/syPrescriptionList.scss";
</style>